<template>
    <div>
        <ETable v-bind="tableConifg" ref="table">


            <template #buttons="{ delAll }">
                <el-button type="primary" @click="add">添加</el-button>
                <el-button type="danger" @click="delAll">批量删除</el-button>
            </template>

            <template #operation="{ row, del }">
                <el-button link type="primary" @click="edit(row.id)">重置密码</el-button>
                <el-button link type="primary" @click="edit(row.id)">编辑</el-button>
                <el-button link type="danger" @click="del(row.id)">删除</el-button>
            </template>

        </ETable>
    </div>

    <AccountAdd v-if="dialogVisible" :isId="id" @dialogVisible="oncFun" ></AccountAdd>
    
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import ETable, { type TableType } from '../../components/ETable.vue';
import { addAccount, delAccount, delAccounts, getAccount, } from '../../apis/account/account';
import  AccountAdd  from '@/views/system/AccountAdd.vue';

// 操作子组件中的数据
const table=ref();


const dialogVisible = ref()

const tableConifg: TableType = {
    isSearch: false,
    loadData: getAccount,
    columns: [
        { prop: 'id', label: '序号' },
        { prop: 'name', label: '姓名' },
        { prop: 'mobile', label: '手机号' },
        { prop: 'username', label: '账号' },
        { prop: 'operation', slot: true, label: '操作', width: "200" }
    ],
    delelte: delAccount,
    delelteAll: delAccounts
}

function oncFun(x: boolean) {
    console.log('父组件函数,接收到子组件的值为:', x)
    dialogVisible.value=x
    table.value.getData()
}



const add = () => {
    dialogVisible.value=true
    // console.log(dialogVisible.value);
}

let id = ref<number>(0)
const edit = (id: number) => {
    alert(id)
    id = id
    dialogVisible.value=true
    
}


</script>

<style scoped lang='less'>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>